/**
 * @file Dashboard.vue
 * @description 管理员仪表盘页面，展示系统概览数据
 * @created 2024-07-12
 */

<template>
  <div class="dashboard-container">
    <!-- 页面头部 -->
    <div class="dashboard-header">
      <h1>教学管理系统概览</h1>
      <div class="header-right">
        <div class="time-filter">
          <span>数据时间范围：</span>
          <el-select v-model="timeRange" placeholder="选择时间范围">
            <el-option v-for="item in timeRangeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <el-button type="primary" @click="refreshData">
          <i class="el-icon-refresh"></i> 刷新数据
        </el-button>
      </div>
    </div>

    <!-- 数据概览卡片 -->
    <data-overview-cards 
      ref="overviewCardsRef"
      :time-range="timeRange"
      :load-api="getOverviewCards"
      :auto-load="true"
    />

    <!-- 图表区域 -->
    <div class="dashboard-charts">
      <div class="chart-card">
        <div class="chart-header">
          <h3>教学资源利用率趋势</h3>
        </div>
        <div class="chart-content">
          <!-- 图表将在这里渲染 -->
          <div class="chart-placeholder">资源利用率趋势图表</div>
        </div>
      </div>

      <div class="chart-card">
        <div class="chart-header">
          <h3>教学质量评分趋势</h3>
        </div>
        <div class="chart-content">
          <!-- 图表将在这里渲染 -->
          <div class="chart-placeholder">教学质量趋势图表</div>
        </div>
      </div>

      <div class="chart-card">
        <div class="chart-header">
          <h3>学生参与度趋势</h3>
        </div>
        <div class="chart-content">
          <!-- 图表将在这里渲染 -->
          <div class="chart-placeholder">学生参与度趋势图表</div>
        </div>
      </div>

      <div class="chart-card">
        <div class="chart-header">
          <h3>教学资源缺口趋势</h3>
        </div>
        <div class="chart-content">
          <!-- 图表将在这里渲染 -->
          <div class="chart-placeholder">资源缺口趋势图表</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import DataOverviewCards from '@/components/DataOverviewCards.vue'
import { getOverviewCards } from '@/api/admin/overview'

// 时间范围选择
const timeRange = ref('semester')
const timeRangeOptions = [
  { value: 'week', label: '最近一周' },
  { value: 'month', label: '最近一个月' },
  { value: 'semester', label: '本学期' },
  { value: 'year', label: '本学年' }
]

// 组件引用
const overviewCardsRef = ref(null)

// 刷新数据方法
const refreshData = () => {
  ElMessage.info('正在刷新数据...')
  
  // 刷新概览卡片数据
  if (overviewCardsRef.value) {
    overviewCardsRef.value.refreshData()
  }
  
  // 刷新其他图表数据
  // ...
  
  ElMessage.success('数据刷新成功')
}

// 组件挂载时初始化
onMounted(() => {
  // 可以在这里进行一些初始化操作
})
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.dashboard-header h1 {
  font-size: 24px;
  color: #303133;
  margin: 0;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.time-filter {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dashboard-charts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.chart-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.chart-header {
  padding: 16px;
  border-bottom: 1px solid #ebeef5;
}

.chart-header h3 {
  font-size: 16px;
  margin: 0;
  color: #303133;
}

.chart-content {
  padding: 20px;
  height: 300px;
}

.chart-placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
  background-color: #f5f7fa;
  border-radius: 4px;
}

/* 响应式布局 */
@media (max-width: 992px) {
  .dashboard-charts {
    grid-template-columns: 1fr;
  }
  
  .header-right {
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }
}

@media (max-width: 768px) {
  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .header-right {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  
  .time-filter {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style> 